import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(createPinia())
app.use(router)

//出现在界面时向上浮动
app.directive('transitionAnimationAppears', {
    mounted(el, binding) {
      // 检查是否需要添加类名
      const checkClass = () => {
        const { top } = el.getBoundingClientRect()
        const h = document.documentElement.clientHeight || document.body.clientHeight
        
        if (top < h) {  // 向下滑动时元素出现在可视范围内
          el.classList.add(binding.value);  // 添加类名
        }else{
          //如果存在类名则移除
          if(el.classList.contains(binding.value)){
            el.classList.remove(binding.value)
          }
        }
      }
  
       // 在组件卸载时移除事件监听
       el._removeScrollListener = () => {
        window.removeEventListener('scroll', checkClass,true)
      }
      
  
      // 添加滚动事件监听
      window.addEventListener('scroll', checkClass, true)
  
      // 页面加载时，检查是否需要添加类名
      checkClass()
  
    },
    
    // 在组件卸载时移除事件监听
    unmounted(el) {
      if (el._removeScrollListener) {
        el._removeScrollListener()
      }
    }
  })

app.mount('#app')
